<template>
  <div class="top-header">
    <div class="left-box">
      <div class="sys-logo">
        <img src="@/assets/images/logo.png" />
      </div>
    </div>

    <div class="right-box">
        <div class="weather-info">
        <span>山西省太原市</span>
        <span class="weather-icon">{{ weatherInfo.icon }}</span>
        <div class="weather-text">
          <div class="temperature">{{weatherInfo.temperature}}°C</div>
          <div class="condition">{{weatherInfo.condition}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {  reactive } from "vue";
import { alovaInstance } from "/@/utils/request.js";
const weatherInfo = reactive({
  temperature: '28',
  condition: '多云转晴',
  icon: '🌤',
})
const icons = {
  '天气晴': '☀️',
  '少云': '🌤',
  '晴间多云': '🌤',
  '多云': '☁️',
  '阴': '☁️',
  '有风': '💨',
  '平静': '🌬',
  '微风': '🍃',
  '和风': '🍃',
  '清风': '🍃',
  '强风/劲风': '💨',
  '疾风': '💨',
  '大风': '💨',
  '烈风': '💨',
  '风暴': '🌪',
  '狂爆风': '🌪',
  '飓风': '🌪',
  '热带风暴': '🌪',
  '霾': '🌫',
  '中度霾': '🌫',
  '重度霾': '🌫',
  '严重霾': '🌫',
  '阵雨': '🌦',
  '雷阵雨': '⛈',
  '雷阵雨并伴有冰雹': '⛈🌨',
  '小雨': '🌧',
  '中雨': '🌧',
  '大雨': '🌧',
  '暴雨': '🌧',
  '大暴雨': '🌧',
  '特大暴雨': '🌧',
  '强阵雨': '🌧',
  '强雷阵雨': '⛈',
  '极端降雨': '🌧',
  '毛毛雨/细雨': '🌦',
  '雨': '🌧',
  '小雨-中雨': '🌧',
  '中雨-大雨': '🌧',
  '大雨-暴雨': '🌧',
  '暴雨-大暴雨': '🌧',
  '大暴雨-特大暴雨': '🌧',
  '雨雪天气': '🌨',
  '雨夹雪': '🌨',
  '阵雨夹雪': '🌨',
  '冻雨': '🌨',
  '雪': '❄️',
  '阵雪': '❄️',
  '小雪': '❄️',
  '中雪': '❄️',
  '大雪': '❄️',
  '暴雪': '❄️',
  '小雪-中雪': '❄️',
  '中雪-大雪': '❄️',
  '大雪-暴雪': '❄️',
  '浮尘': '🌫',
  '扬沙': '🌫',
  '沙尘暴': '🌫',
  '强沙尘暴': '🌫',
  '龙卷风': '🌪',
  '雾': '🌫',
  '浓雾': '🌫',
  '强浓雾': '🌫',
  '轻雾': '🌫',
  '大雾': '🌫',
  '特强浓雾': '🌫',
  '热': '🌡️',
  '冷': '🥶',
  '未知': '☀️'
};
const getWeather = async () => {
  const res = await alovaInstance.Get("https://restapi.amap.com/v3/weather/weatherInfo?city=140100&key=0bbf61f18de4bd019b1a634f9d4c4c7b");
  if(res && res.lives && res.lives.length) {
    const { temperature, weather } = res.lives[0];
    weatherInfo.temperature = temperature;
    weatherInfo.condition = weather;
    weatherInfo.icon = icons[weather] || '🌤';
  }
}
getWeather()
</script>
<style lang="less" scoped>
.top-header {
  height: 101px;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 30px;
  line-height: 101px;
  background-image: url("/@/assets/home/bar.png");
  position: absolute;
  top: 0;
  z-index: 999;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .left-box {
    position: absolute;
    width: 25%;
    height: auto;
    left: 0;
    top: 22px;
    display: flex;
    justify-content: flex-start;

    .sys-logo {
      display: flex;

      img {
        margin: 0 0 0 12px;
        height: 65px;
        width: auto;
      }
    }
  }

  .weather-info {
    display: flex;
    margin-top: 20px;
    margin-right: 10px;
    height: 55px;
    align-items: center;
    font-size: 16px;
    background: linear-gradient(
      145deg,
      rgba(0, 153, 255, 0.2),
      rgba(0, 102, 204, 0.15)
    );
    padding: 8px 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.2);
    backdrop-filter: blur(5px);
    .weather-text {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .weather-icon {
      font-size: 32px;
      margin-right: 1px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      font-family: "Segoe UI Emoji";
    }

    .temperature {
      font-size: 13px;
      line-height: 0;
      font-weight: 600;
      color: #fff;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    }

    .condition {
      font-size: 13px;
      line-height: 0;
      color: rgba(255, 255, 255, 0.9);
    }
  }
  .right-box{
    position: absolute;
    height: auto;
    right: 0;
    top: 22px;
    display: flex;
    justify-content: flex-start;
  }
}
</style>
